<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        threejs-position-util
    </title>
    <link
            rel="stylesheet"
            href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"
            integrity="sha384-oAOxQR6DkCoMliIh8yFnu25d7Eq/PHS21PClpwjOTeU2jRSq11vu66rf90/cZr47"
            crossorigin="anonymous"
    />
    <link rel="stylesheet" href="styles.css" type="text/css"/>

    <script>
        document.addEventListener("DOMContentLoaded", function(e) {

            /**
             * init menu items
             */
            var menuItems = document.getElementsByClassName('pure-menu-item');

            function init() {
                for( var i = 0 ; i < menuItems.length; i++ ){
                    var item = menuItems[i];
                    item.addEventListener("click", function(e){
                        selectMenu(e.currentTarget);
                    })
                }
                selectMenu( menuItems[0] );
            }

            function selectMenu( item ){
                removeAllClass(menuItems);
                item.classList.add('pure-menu-selected');
            }
            function removeAllClass(items){
                for( var i = 0 ; i < items.length; i++ ){
                    var item = menuItems[i];
                    item.classList.remove('pure-menu-selected');
                }
            }

            init();

            /**
             * init toggle menu
             */
            function initToggleMenu(){
                var layout   = document.getElementById('layout'),
                    menu     = document.getElementById('menu'),
                    menuLink = document.getElementById('menuLink');

                function toggleClass(element, className) {
                    var classes = element.className.split(/\s+/),
                        length = classes.length,
                        i = 0;

                    for (; i < length; i++) {
                        if (classes[i] === className) {
                            classes.splice(i, 1);
                            break;
                        }
                    }
                    // The className is not found
                    if (length === classes.length) {
                        classes.push(className);
                    }

                    element.className = classes.join(' ');
                }

                function toggleAll(e) {
                    var active = 'active';
                    toggleClass(layout, active);
                    toggleClass(menu, active);
                    toggleClass(menuLink, active);
                }

                function handleEvent(e) {
                    if (e.target.id === menuLink.id) {
                        return toggleAll(e);
                    }
                    if (menu.className.indexOf('active') !== -1) {
                        return toggleAll(e);
                    }
                }

                document.addEventListener('click', handleEvent);
            }
            initToggleMenu();

        });
    </script>

</head>
<body>
<div id="layout">
    <a href="#menu" id="menuLink" class="menu-link">
        <span></span>
    </a>
    <div id="menu">
        <div class="pure-menu">
            <a class="pure-menu-heading" href="https://MasatoMakino@github.com/MasatoMakino/threejs-position-util.git">threejs-position-util</a>
            <ul class="pure-menu-list">
                <li class="pure-menu-item"><a class="pure-menu-link" href="demo.html" target="demo-frame">demo.html</a></li>
                
            </ul>
        </div>
    </div>
    <iframe name="demo-frame" id="demo-frame" src="demo.html"></iframe>
</div>
</body>
</html>
